<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    div {
      width: 300px;
      height: 820px;
      border: 1px solid #ccc;
      text-align: center;
      margin: auto;
    }

    h1 {
      text-align: center;
    }

    #zi {
      width: 250px;
      height: 30px;
      margin-bottom: 10px;
    }

    #shou {
      width: 250px;
      height: 30px;
      margin-bottom: 10px;
    }

    #fu {
      width: 250px;
      height: 30px;
      margin-bottom: 10px;
    }

    #mi {
      width: 250px;
      height: 30px;
      margin-bottom: 10px;
    }

    #you {
      width: 250px;
      height: 30px;
      margin-bottom: 10px;
    }

    #man {
      width: 150px;
      height: 30px;
    }

    #btn {
      width: 100px;
      height: 36px;
      margin-bottom: 10px;
    }

    #tong {
      margin-bottom: 10px;
    }

    #ti {
      width: 250px;
      height: 30px;
    }
  </style>

  <body>
    <div>
      <h1>用户注册</h1>
      <input type="text" placeholder="自定义提示" id="zi" /><span id="s"></span
      ><br />
      <input type="text" placeholder="请输入11位手机号" id="shou" /><span
        id="hao"
      ></span
      ><br />
      <input type="text" placeholder="请输入验证码" id="man" /><span
        id="a"
      ></span
      ><button id="btn">获取验证码</button><br />
      <input
        type="text"
        placeholder="请输入长度为6-12个字符的密码"
        id="fu"
      /><span id="f"></span><br />
      <input type="text" placeholder="请再次输入密码" id="mi" /><span
        id="m"
      ></span
      ><br />
      <input
        type="text"
        placeholder="请输入邮箱,邮箱格式,123@163.com"
        id="you"
      /><span id="y"></span><br />
      <p>请选择兴趣</p>
      <input type="checkbox" name="" id="duo" /><span class="dout"></span> 足球
      <input type="checkbox" name="" id="d" /><span class="dout"></span>篮球
      <input type="checkbox" name="" id="u" /><span class="dout"></span>羽毛球
      <input type="checkbox" name="" id="o" /><span class="dout"></span>网球
      <p>请选择职业</p>
      <input type="radio" name="age" id="" />程序员
      <input type="radio" name="age" id="" />设计师
      <input type="radio" name="age" id="" />架构师
      <p>请选择性别</p>
      <input type="radio" name="nan" id="" />男
      <input type="radio" name="nan" id="" />女
      <input type="radio" name="nan" id="" />其他
      <p>请选择收入</p>
      <select name="" id="">
        <option value="">请选择</option>
        <option value="">2000</option>
        <option value="">3000</option>
        <option value="">4000</option>
        <option value="">5000</option>
        <option value="">6000</option>
        <option value="">8000</option>
      </select>
      <p>请选择支出</p>
      <select name="" id="">
        <option value="">请选择</option>
        <option value="">2000</option>
        <option value="">3000</option>
        <option value="">4000</option>
        <option value="">5000</option>
        <option value="">6000</option>
        <option value="">8000</option></select
      ><br /><br />
      <input type="radio" id="tong" />我已阅读并同意<br />
      <button id="ti">提交</button>
    </div>
  </body>
  <script>
    zi.onblur = function () {
      var reg = /^[\u4e00-\u9fa5]{4,6}$/;
      if (reg.test(this.value)) {
        s.innerHTML = "✔";
      } else {
        s.innerHTML = "×";
      }
    };
    shou.onblur = function () {
      var reg = /^1[2-9]\d{9}$/;
      if (reg.test(this.value)) {
        hao.innerHTML = "✔";
      } else {
        hao.innerHTML = "×";
      }
    };

    man.onblur = function () {
      var reg = /^[A-z\d]{5}$/;
      if (reg.test(this.value)) {
        a.innerHTML = "✔";
      } else {
        a.innerHTML = "×";
      }
    };
    btn.onclick = function () {
      clearInterval(f);
      var nem = 5;
      var f = setInterval(fun, 1000);
      function fun() {
        nem--;
        var i = document.getElementById("btn");
        i.innerHTML = nem;
        if (nem == 0) {
          var max = 9,
            min = 1;
          var arr = [];
          for (var i = 0; i < 5; i++) {
           arr[i] = Math.floor(Math.random() * (max - min + 1)) + min;
            for (var j = 0; j < i; j++) {
              if (arr[i] == arr[j]) {
                i--;
              }
            }
          }
         
          man.value = arr;
          clearInterval(f);
        }
      }
    };
    fu.onblur = function () {
      var reg = /^[a-zA-Z]\w{5,17}$/;
      if (reg.test(this.value)) {
        f.innerHTML = "✔";
      } else {
        f.innerHTML = "×";
      }
    };
    mi.onblur = function () {
      var reg = /^[a-zA-Z]\w{5,17}$/;
      if (reg.test(this.value)) {
        m.innerHTML = "✔";
      } else {
        m.innerHTML = "×";
      }
    };
    you.onblur = function () {
      var reg = /^[\w._]+@(qq|gmail|163)\.com(\r\n|\r|\n)?$/;
      if (reg.test(this.value)) {
        y.innerHTML = "✔";
      } else {
        y.innerHTML = "×";
      }
    };
    ti.onclick = function () {
      var duox = document.getElementsByTagName("duo"),
        dux = document.getElementsByTagName("d"),
        dox = document.getElementsByTagName("u"),
        dx = document.getElementsByTagName("o");
      if (
        duox.checked == false &&
        dux.checked == false &&
        dox.checked == false &&
        dx.checked == false
      ) {
        dout.innerHTML = "兴趣必须选一个";
      } else {
        dout.innerHTML = "√";
      }
    };

    ti.onclick = function () {
      var e = document.getElementsByTagName("span");
      for (let i = 0; i < e.length; i++) {
        if (e[i].innerHTML == "√") {
          window.open("http://www.baidu.com");
        } else {
          alert("输入框内容不能为空或不符合规则");
          return;
        }
      }
    };
  </script>
</html>
